<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="编号id" prop="id">
        <el-input v-model="ruleForm.id" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="父级id" prop="pid">
        <el-input v-model="ruleForm.pid" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-form-item label="菜单路由" prop="path">
        <el-input v-model="ruleForm.path"></el-input>
      </el-form-item>

      <el-form-item label="菜单图标" prop="icon">
        <el-input v-model="ruleForm.icon"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'UpdateLeftMenu',
    data () {
      return {
        ruleForm: {
          id: 932,
          pid: 66,
          name: '菜单2342名称',
          path: '菜单23423路由',
          icon: 'el-icon-user-solid234234',
          createTime: '2016-05-01',
          status: 33,
          type: 33
        },
        rules: {
          id: [
            {required: true, message: '编号id不能为空', trigger: 'blur'}
          ],
          pid: [
            {required: true, message: '父级id不能为空', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入菜单名称', trigger: 'blur'}
          ],
          path: [
            {required: true, message: '请输入菜单路由地址', trigger: 'blur'}
          ],
          icon: [
            {required: true, message: '请输入icon图标', trigger: 'blur'}
          ],
        }
      }
    },
    created () {
      this.ruleForm = this.$route.query.form
      console.log(this.ruleForm)
    },
    methods: {
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var data = {
              id: this.ruleForm.id,
              pid: this.ruleForm.pid,
              name: this.ruleForm.name,
              path: this.ruleForm.path,
              icon: this.ruleForm.icon
            }
            this.$http.postRequest('user/leftMenu/updateLeftMenu', data, 'application/json;charset=UTF-8').then(res => {
              if (res.data.code == 200) {
                this.$message.info('修改成功')
                let timer = setTimeout(() => {
                  //跳转页面
                  this.$router.push('/LeftMenu')
                }, 1000)
                // 离开当前页面时销毁定时器
                this.$once('hook:beforeDestroy', () => {
                  clearInterval(timer)
                  timer = null
                })
              } else if (res.data.code == 403) {
                this.$message.info('暂无操作权限')
              } else {
                this.$message.info(res.data.message)
              }
            }).catch(err => {
              this.$message.info(err)
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style scoped>

</style>
